import React, {Component} from 'react';

class RenderProps extends Component {
    render() {
        return (
            <div>
                <h3>I am RenderProps component</h3>
                {/*以标签体来传值*/}
                <One> Hello </One>
                {/*以标签体继续传组件*/}
                <One>
                    <Two/>
                </One>

                {/*以函数形式展示方式,可以实现参数传递*/}
                <One render={(name) => <Two name={name}/>}/>
            </div>
        );
    }
}

class One extends Component {

    state = {name: 'Anna'}

    render() {
        return (
            <div>
                <h3>I am One component</h3>
                {/*标签体的内容需要{this.props.children}展示*/}
                {this.props.children}

                {/*以函数形式展示方式*/}
                {this.props.render(this.state.name)}
            </div>
        );
    }
}

class Two extends Component {
    render() {
        return (
            <div>
                <h3>I am Two component</h3>
                <strong>For Parent value: {this.props.name}</strong>
            </div>
        );
    }
}


export default RenderProps;